<template>
    <div>
        <div v-wechat-title="$route.meta.title"></div>
        <el-container>
            <el-header>
                <el-menu
                    :default-active="activepath"
                    class="el-menu-demo"
                    mode="horizontal"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                >
                    <el-menu-item index="999" style="font-size: 30px"
                        >Oy在线商城</el-menu-item
                    >
                    <el-menu-item
                        index="1"
                        style="float: right"
                        @click="saveNavState('1', '/login')"
                        >管理后台</el-menu-item
                    >
                    <el-menu-item
                        index="2"
                        style="float: right"
                        @click="saveNavState('2', '/buslogin')"
                        >商家后台</el-menu-item
                    >
                    <el-menu-item
                        index="3"
                        style="float: right"
                        @click="saveNavState('3', '/cart')"
                        >个人中心</el-menu-item
                    >
                    <el-menu-item
                        index="4"
                        style="float: right"
                        @click="saveNavState('4', '/catepart')"
                        >分类</el-menu-item
                    >
                    <el-menu-item
                        index="5"
                        style="float: right"
                        @click="saveNavState('5', '/index')"
                        >首页</el-menu-item
                    >
                    <el-menu-item
                        v-if="islogin !== '1'"
                        style="float: right"
                        @click="loginVisible = true"
                        >登录</el-menu-item
                    >
                    <el-menu-item
                        v-if="islogin == '1'"
                        style="float: right"
                        @click="logout()"
                        >退出</el-menu-item
                    >
                </el-menu>
            </el-header>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
        <!-- 添加框 -->
        <el-dialog
         v-loading = "loadingStatus"
            title="新用户注册"
            :visible.sync="addVisible"
            width="30%"
            @close="addDialogClosed"
        >
            <span slot="footer" class="dialog-footer">
                <el-form
                    label-width="80px"
                    :model="newData"
                    ref="addFormRef"
                    :rules="addFormRules"
                >
                    <el-form-item label="昵称" prop="nike">
                        <el-input v-model="newData.nike"></el-input>
                    </el-form-item>
                    <el-form-item label="登录账号" prop="loginname">
                        <el-input v-model="newData.loginname"></el-input>
                    </el-form-item>
                    <el-form-item label="电话" prop="tel">
                        <el-input v-model="newData.tel"></el-input>
                    </el-form-item>
                    <el-form-item label="收货地址" prop="address">
                        <el-input v-model="newData.address"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="pwd">
                        <el-input
                            v-model="newData.pwd"
                            type="password"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="twicepwd">
                        <el-input
                            v-model="newData.twicepwd"
                            type="password"
                        ></el-input>
                    </el-form-item>
                </el-form>
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="add()">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 添加框 -->
        <el-dialog
         v-loading = "loadingStatus"
            title="用户登录"
            :visible.sync="loginVisible"
            width="30%"
            @close="loginDialogClosed"
        >
            <span slot="footer" class="dialog-footer">
                <el-form
                    label-width="80px"
                    :model="loginData"
                    ref="loginFormRef"
                    :rules="loginFormRules"
                >
                    <el-form-item label="登录账号" prop="loginname">
                        <el-input v-model="loginData.loginname"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="pwd">
                        <el-input
                            v-model="loginData.pwd"
                            type="password"
                        ></el-input>
                    </el-form-item>
                </el-form>
                <el-button @click="addVisible = true">注 册</el-button>
                <el-button @click="loginVisible = false">取 消</el-button>
                <el-button type="primary" @click="login()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        var checkMobile = (rule, value, callback) => {
            const regMobile = /^1[34578]\d{9}$/;
            if (regMobile.test(value)) {
                return callback();
            }
            // 返回一个错误提示
            callback(new Error('请输入合法的手机号码'));
        };
        return {
            loadingStatus:false,
            islogin: '0',
            activepath: '5',
            loginData: {
                loginname: '',
                pwd: '',
            },
            newData: {
                nike: '',
                loginname: '',
                pwd: '',
                twicepwd: '',
                tel: '',
                address: '',
            },
            addVisible: false,
            loginVisible: false,
            addFormRules: {
                nike: [
                    { required: true, message: '请输入昵称', trigger: 'blur' },
                    {
                        min: 3,
                        max: 10,
                        message: '昵称长度在 3 到 10 个字符',
                        trigger: 'blur',
                    },
                ],
                loginname: [
                    {
                        required: true,
                        message: '请输入登录账号',
                        trigger: 'blur',
                    },
                    {
                        min: 7,
                        max: 15,
                        message: '登录账号长度在 7 到 15 个字符',
                        trigger: 'blur',
                    },
                ],
                address: [
                    {
                        required: true,
                        message: '请输入收货地址',
                        trigger: 'blur',
                    },
                    {
                        min: 5,
                        max: 30,
                        message: '收货地址长度在 5 到 30 个字符',
                        trigger: 'blur',
                    },
                ],
                tel: [
                    {
                        required: true,
                        message: '请输入手机号码',
                        trigger: 'blur',
                    },
                    { validator: checkMobile, trigger: 'blur' },
                ],
                pwd: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    {
                        min: 6,
                        max: 15,
                        message: '密码长度在 6 到 15 个字符',
                        trigger: 'blur',
                    },
                ],
                twicepwd: [
                    {
                        required: true,
                        message: '请再次输入密码',
                        trigger: 'blur',
                    },
                    {
                        min: 6,
                        max: 15,
                        message: '密码长度在 6 到 15 个字符',
                        trigger: 'blur',
                    },
                ],
            },
            loginFormRules: {
                loginname: [
                    {
                        required: true,
                        message: '请输入登录账号',
                        trigger: 'blur',
                    },
                    {
                        min: 7,
                        max: 15,
                        message: '登录账号长度在 7 到 15 个字符',
                        trigger: 'blur',
                    },
                ],
                pwd: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    {
                        min: 6,
                        max: 15,
                        message: '密码长度在 6 到 15 个字符',
                        trigger: 'blur',
                    },
                ],
            },
        };
    },
    created() {
        this.activepath = window.sessionStorage.getItem('activepath');
        this.checklogin();
    },
    methods: {
        checklogin() {
            this.islogin = this.$cookie.get('login');
        },
        saveNavState(activepath, url) {
            window.sessionStorage.setItem('activepath', activepath);
            this.activepath = activepath;
            this.$router.push(url);
        },
        addDialogClosed() {
            this.$refs.addFormRef.resetFields();
        },
        add() {
            this.loadingStatus = true;
            this.$refs.addFormRef.validate(async (valid) => {
                if (!valid) {
                    return;
                }
                if (this.newData.pwd !== this.newData.twicepwd) {
                    this.$Message.error('二次输入的密码不一致！');
                    return;
                }
                this.$confirm('您即将注册新用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                })
                    .then(() => {
                        let params = new URLSearchParams();
                        params.append('loginname', this.newData.loginname);
                        params.append('nike', this.newData.nike);
                        params.append('pwd', this.newData.pwd);
                        params.append('tel', this.newData.tel);
                        params.append('address', this.newData.address);
                        this.$http
                            .post('register', params)
                            .then((res) => {
                                this.loadingStatus=false;
                                if (res.data.code == 200) {
                                    this.$Message.success('添加成功！');
                                    this.addVisible = false;
                                } else {
                                    this.$Message.error(res.data.msg);
                                }
                            })
                            .catch((err) => {
                                this.$Message.error('系统错误！' + err);
                                this.loadingStatus=false;
                            });
                    })
                    .catch(() => {
                        this.$Message({
                            type: 'info',
                            message: '已取消注册',
                        });
                        this.loadingStatus=false;
                    });
            });
        },
        loginDialogClosed() {
            this.$refs.loginFormRef.resetFields();
        },
        login() {
            this.loadingStatus=true;
            this.$refs.loginFormRef.validate(async (valid) => {
                if (!valid) {
                    return;
                }
                let params = new URLSearchParams();
                params.append('loginname', this.loginData.loginname);
                params.append('pwd', this.loginData.pwd);
                this.$http
                    .post('userlogin', params)
                    .then((res) => {
                        this.loadingStatus=false;
                        if (res.data.code == 200) {
                            this.$cookie.set('login', '1');
                            window.sessionStorage.setItem(
                                'usertoken',
                                res.data.data.token
                            );
                            window.sessionStorage.setItem(
                                'userid',
                                res.data.data.id
                            );
                            this.$Message.success('登录成功');
                            this.islogin = '1';
                            this.loginVisible = false;
                        } else {
                            this.$Message.error(res.data.msg);
                        }
                    })
                    .catch((err) => {
                        this.$Message.error('系统错误！' + err);
                        this.loadingStatus=false;
                    });
            });
        },
        logout() {
            this.$confirm('您即将退出登录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    this.$cookie.set('login', '0');
                    this.islogin = '0';
                    window.sessionStorage.clear();
                    this.$Message.success('成功退出');
                    this.$router.push('/index');
                })
                .catch(() => {
                    this.$Message({
                        type: 'info',
                        message: '已取消退出',
                    });
                });
        },
    },
};
</script> 

<style scoped>
.el-header {
    background-color: #545c64;
    color: #333;
    text-align: center;
    line-height: 60px;
}

.el-main {
    background-color: #e9eef3;
    color: #333;
    text-align: center;
}
</style>